<template>
  <view class="container">
    <!-- 医生基本信息 -->
    <view class="doctor-header">
      <image
        class="doctor-avatar"
        :src="doctor.avatar"
        mode="aspectFill"
      ></image>
      <view class="doctor-info">
        <view class="name-title">
          <text class="name">{{ doctor.name }}</text>
          <text class="title">{{ doctor.title }}</text>
        </view>
        <view class="tags">
          <text class="tag" v-for="(tag, index) in doctor.tags" :key="index">{{
            tag
          }}</text>
        </view>
      </view>
      <button class="share-btn">
        <text class="share-text">分享</text>
      </button>
    </view>

    <!-- 擅长和简介 -->
    <view class="detail-section">
      <view class="section-item">
        <text class="label">擅长：</text>
        <text class="content">{{ doctor.expertise }}</text>
      </view>
      <view class="section-item">
        <text class="label">简介：</text>
        <text class="content">{{ doctor.description }}</text>
      </view>
    </view>

    <!-- 功能选项卡 -->
    <view class="function-tabs">
      <view class="tab active">门诊预约</view>
      <view class="tab">在线咨询</view>
    </view>

    <!-- 门店选择 -->
    <view class="clinic-select" @click="showMoreClinics">
      <text class="clinic-name">{{ selectedClinic.name }}</text>
      <text class="clinic-distance">{{ selectedClinic.distance }}km</text>
      <text class="more">更多</text>
    </view>

    <!-- 预约日历 -->
    <view class="calendar">
      <view class="week-header">
        <text
          v-for="day in ['一', '二', '三', '四', '五', '六', '日']"
          :key="day"
          >{{ day }}</text
        >
      </view>
      <view class="dates">
        <view
          class="date-item"
          v-for="(date, index) in scheduleDates"
          :key="index"
          :class="{
            'has-schedule': date.hasSchedule,
            selected: date.selected,
            disabled: date.disabled,
          }"
          @click="selectDate(date)"
        >
          <text class="date">{{ date.day }}</text>
          <text class="status">{{ date.status }}</text>
        </view>
      </view>
    </view>

    <!-- 底部预约按钮 -->
    <view class="footer">
      <view class="price">
        <text class="amount">¥{{ doctor.price }}</text>
        <text class="unit">/次</text>
      </view>
      <button class="book-btn" @click="handleBooking" :disabled="!selectedDate || selectedDate.disabled">
        预约(余{{ availableCount }})
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      doctor: {
        id: 1,
        name: "陈龙",
        title: "主治医师",
        tags: ["疼痛", "消化", "代谢", "中医科"],
        avatar: "/static/doctors/doctor1.jpg",
        expertise:
          "1、消化道疾病：腹痛、腹胀、腹泻、便秘、反酸、烧心、口干、口苦、口臭、消化不良、食欲不振等",
        description:
          "毕业于成都中医药大学，在三甲医院完成住院医师规范化培训，具有丰富的临床经验。",
        price: 50,
      },
      selectedClinic: {
        name: "秉正堂高新区新乐路店",
        distance: 11,
      },
      scheduleDates: [
        { day: 6, status: "完诊", disabled: true },
        { day: 7, status: "未排班", disabled: true },
        { day: 8, status: "有号", hasSchedule: true },
        { day: 9, status: "未排班", disabled: true },
        { day: 10, status: "有号", hasSchedule: true },
        { day: 11, status: "未排班", disabled: true },
        { day: 12, status: "有号", hasSchedule: true },
        { day: 13, status: "有号", hasSchedule: true },
        { day: 14, status: "未排班", disabled: true },
        { day: 15, status: "未放号", disabled: true },
        // ... 更多日期
      ],
      availableCount: 17,
      selectedDate: null,
      // 模拟上下午可预约时间段和人数
      appointmentTimes: {
        morning: [
          { time: '09:00 - 09:30', count: 3 },
          { time: '09:30 - 10:00', count: 2 },
          { time: '10:00 - 10:30', count: 4 }
        ],
        afternoon: [
          { time: '14:00 - 14:30', count: 2 },
          { time: '14:30 - 15:00', count: 3 },
          { time: '15:00 - 15:30', count: 2 }
        ]
      }
    };
  },
  methods: {
    showMoreClinics() {
      // 显示更多门店
    },
    selectDate(date) {
      if (!date.disabled) {
        // 清除之前选中的日期
        this.scheduleDates.forEach(item => item.selected = false);
        // 标记当前选中的日期
        date.selected = true;
        this.selectedDate = date;
      }
    },
    handleBooking() {
      if (this.selectedDate && this.selectedDate.hasSchedule) {
        let content = '上午可预约时间段：\n';
        this.appointmentTimes.morning.forEach(item => {
          content += `${item.time} 剩余 ${item.count} 个名额\n`;
        });
        content += '\n下午可预约时间段：\n';
        this.appointmentTimes.afternoon.forEach(item => {
          content += `${item.time} 剩余 ${item.count} 个名额\n`;
        });
        uni.showModal({
          title: `预约 ${this.selectedDate.day} 日`,
          content: content,
          showCancel: false
        });
      }
    },
  },
};
</script>

<style>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.doctor-header {
  background: #e86a40;
  padding: 30rpx;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
}

.doctor-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.doctor-info {
  flex: 1;
  margin-left: 20rpx;
}

.name-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.title {
  font-size: 28rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 4rpx 20rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
}

.share-btn {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
}

.share-text {
  color: #fff;
  font-size: 28rpx;
}

.detail-section {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-item {
  margin-bottom: 20rpx;
}

.section-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
}

.function-tabs {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.tab {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #666;
  position: relative;
}

.tab.active {
  color: #e86a40;
  font-weight: bold;
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #e86a40;
}

.clinic-select {
  background: #fff;
  padding: 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.clinic-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.clinic-distance {
  font-size: 24rpx;
  color: #999;
  margin-right: 20rpx;
}

.more {
  font-size: 24rpx;
  color: #666;
}

.calendar {
  background: #fff;
  padding: 30rpx;
}

.week-header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
}

.week-header text {
  font-size: 28rpx;
  color: #666;
}

.dates {
  display: flex;
  flex-wrap: wrap;
}

.date-item {
  width: 14.28%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.date {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.status {
  font-size: 24rpx;
  color: #999;
}

.date-item.has-schedule {
  color: #e86a40;
}

.date-item.has-schedule .status {
  color: #e86a40;
}

.date-item.disabled {
  color: #999;
}

.date-item.disabled .status {
  color: #ccc;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.price {
  display: flex;
  align-items: baseline;
}

.amount {
  font-size: 40rpx;
  color: #e86a40;
  font-weight: bold;
}

.unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.book-btn {
  background: #e86a40;
  color: #fff;
  font-size: 32rpx;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  border: none;
}
</style>